<template>
  <div class="exam-detail" v-loading="loading">
    <!-- 考试头部信息 -->
    <div class="exam-header">
      <div class="container">
        <div class="header-content">
          <!-- 面包屑导航 -->
          <div class="breadcrumb">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/exams' }">考试中心</el-breadcrumb-item>
              <el-breadcrumb-item>{{ exam.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <!-- 考试基本信息 -->
          <div class="exam-info">
            <div class="exam-basic">
              <div class="exam-tags">
                <el-tag
                  :type="getCategoryType(exam.category)"
                  size="large"
                  effect="plain"
                >
                  {{ getCategoryText(exam.category) }}
                </el-tag>
                
                <el-tag
                  :type="getStatusType(exam.status)"
                  size="large"
                >
                  {{ getStatusText(exam.status) }}
                </el-tag>
                
                <el-tag
                  :type="getDifficultyType(exam.difficulty)"
                  size="large"
                  effect="plain"
                >
                  {{ getDifficultyText(exam.difficulty) }}
                </el-tag>
              </div>
              
              <h1 class="exam-title">{{ exam.title }}</h1>
              
              <p class="exam-description">{{ exam.description }}</p>
              
              <div class="exam-meta">
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>考试时长：{{ exam.duration }}分钟</span>
                </div>
                
                <div class="meta-item">
                  <el-icon><Document /></el-icon>
                  <span>题目数量：{{ exam.questionCount }}题</span>
                </div>
                
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>参与人数：{{ formatNumber(exam.participants) }}人</span>
                </div>
                
                <div class="meta-item">
                  <el-icon><TrendCharts /></el-icon>
                  <span>通过率：{{ exam.passRate }}%</span>
                </div>
              </div>
              
              <div class="exam-time">
                <div class="time-item">
                  <span class="time-label">开始时间：</span>
                  <span class="time-value">{{ formatDateTime(exam.startTime) }}</span>
                </div>
                <div class="time-item">
                  <span class="time-label">结束时间：</span>
                  <span class="time-value">{{ formatDateTime(exam.endTime) }}</span>
                </div>
                <div v-if="exam.remainingTime" class="time-item countdown">
                  <span class="time-label">剩余时间：</span>
                  <span class="time-value countdown-value">{{ formatCountdown(exam.remainingTime) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 考试操作 -->
            <div class="exam-actions">
              <div class="action-card">
                <div v-if="exam.score !== null" class="score-display">
                  <div class="score-label">我的成绩</div>
                  <div class="score-value" :class="getScoreClass(exam.score)">
                    {{ exam.score }}分
                  </div>
                  <div class="score-status">
                    {{ exam.score >= exam.passScore ? '通过' : '未通过' }}
                  </div>
                </div>
                
                <div class="action-buttons">
                  <el-button
                    v-if="exam.status === 'upcoming'"
                    type="primary"
                    size="large"
                    class="action-btn"
                    @click="handleStartExam"
                    :disabled="!canStartExam"
                  >
                    {{ getExamButtonText }}
                  </el-button>
                  
                  <el-button
                    v-else-if="exam.status === 'ongoing'"
                    type="success"
                    size="large"
                    class="action-btn"
                    @click="handleContinueExam"
                  >
                    继续考试
                  </el-button>
                  
                  <el-button
                    v-else
                    type="info"
                    size="large"
                    class="action-btn"
                    @click="handleViewResult"
                  >
                    查看结果
                  </el-button>
                  
                  <el-button
                    v-if="exam.allowRetake && exam.score !== null"
                    type="warning"
                    size="large"
                    plain
                    @click="handleRetakeExam"
                  >
                    重新考试
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 考试内容 -->
    <div class="exam-content">
      <div class="container">
        <el-tabs v-model="activeTab" class="exam-tabs">
          <!-- 考试说明 -->
          <el-tab-pane label="考试说明" name="instructions">
            <div class="instructions-content">
              <div class="section">
                <h3>考试须知</h3>
                <div class="notice-list">
                  <div class="notice-item">
                    <el-icon class="notice-icon"><InfoFilled /></el-icon>
                    <span>考试时间为 {{ exam.duration }} 分钟，请合理安排答题时间</span>
                  </div>
                  <div class="notice-item">
                    <el-icon class="notice-icon"><InfoFilled /></el-icon>
                    <span>考试过程中请保持网络连接稳定，避免因网络问题影响考试</span>
                  </div>
                  <div class="notice-item">
                    <el-icon class="notice-icon"><InfoFilled /></el-icon>
                    <span>考试开始后不允许切换浏览器标签页或最小化窗口</span>
                  </div>
                  <div class="notice-item">
                    <el-icon class="notice-icon"><InfoFilled /></el-icon>
                    <span>请确保在安静的环境中完成考试，避免外界干扰</span>
                  </div>
                  <div class="notice-item">
                    <el-icon class="notice-icon"><WarningFilled /></el-icon>
                    <span>考试过程中如有作弊行为，将被取消考试资格</span>
                  </div>
                </div>
              </div>
              
              <div class="section">
                <h3>考试规则</h3>
                <div class="rules-content">
                  <div class="rule-item">
                    <h4>评分标准</h4>
                    <p>总分 {{ exam.totalScore }} 分，及格分数 {{ exam.passScore }} 分</p>
                    <div class="score-breakdown">
                      <div v-for="type in exam.questionTypes" :key="type.type" class="score-item">
                        <span class="question-type">{{ getQuestionTypeText(type.type) }}</span>
                        <span class="question-count">{{ type.count }}题</span>
                        <span class="question-score">每题{{ type.score }}分</span>
                      </div>
                    </div>
                  </div>
                  
                  <div class="rule-item">
                    <h4>答题要求</h4>
                    <ul class="requirements">
                      <li>单选题：每题只能选择一个答案</li>
                      <li>多选题：可以选择多个答案，少选或多选均不得分</li>
                      <li>判断题：选择正确或错误</li>
                      <li>填空题：请填写准确的答案，注意大小写和标点符号</li>
                      <li>简答题：请详细回答问题，字数不少于规定要求</li>
                    </ul>
                  </div>
                  
                  <div class="rule-item">
                    <h4>提交规则</h4>
                    <ul class="requirements">
                      <li>考试时间结束后系统将自动提交试卷</li>
                      <li>提前完成可手动提交，提交后不可修改答案</li>
                      <li>建议答题完成后仔细检查再提交</li>
                    </ul>
                  </div>
                </div>
              </div>
              
              <div class="section">
                <h3>技术要求</h3>
                <div class="tech-requirements">
                  <div class="requirement-item">
                    <el-icon class="req-icon"><Monitor /></el-icon>
                    <div class="req-content">
                      <h4>浏览器要求</h4>
                      <p>推荐使用 Chrome、Firefox、Safari 等现代浏览器</p>
                    </div>
                  </div>
                  
                  <div class="requirement-item">
                    <el-icon class="req-icon"><Connection /></el-icon>
                    <div class="req-content">
                      <h4>网络要求</h4>
                      <p>确保网络连接稳定，建议使用有线网络或稳定的WiFi</p>
                    </div>
                  </div>
                  
                  <div class="requirement-item">
                    <el-icon class="req-icon"><Setting /></el-icon>
                    <div class="req-content">
                      <h4>设备要求</h4>
                      <p>建议使用电脑进行考试，确保设备电量充足</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 考试统计 -->
          <el-tab-pane label="考试统计" name="statistics">
            <div class="statistics-content">
              <div class="stats-overview">
                <div class="stat-card">
                  <div class="stat-number">{{ exam.participants }}</div>
                  <div class="stat-label">参与人数</div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-number">{{ exam.averageScore }}分</div>
                  <div class="stat-label">平均分</div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-number">{{ exam.passRate }}%</div>
                  <div class="stat-label">通过率</div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-number">{{ exam.highestScore }}分</div>
                  <div class="stat-label">最高分</div>
                </div>
              </div>
              
              <div class="score-distribution">
                <h3>成绩分布</h3>
                <div class="distribution-chart">
                  <div
                    v-for="(range, index) in scoreRanges"
                    :key="index"
                    class="score-range"
                  >
                    <div class="range-label">{{ range.label }}</div>
                    <div class="range-bar">
                      <div
                        class="range-fill"
                        :style="{ width: range.percentage + '%' }"
                      ></div>
                    </div>
                    <div class="range-count">{{ range.count }}人</div>
                  </div>
                </div>
              </div>
              
              <div class="difficulty-analysis">
                <h3>题目难度分析</h3>
                <div class="difficulty-chart">
                  <div
                    v-for="(item, index) in difficultyStats"
                    :key="index"
                    class="difficulty-item"
                  >
                    <div class="difficulty-label">{{ item.label }}</div>
                    <div class="difficulty-bar">
                      <div
                        class="difficulty-fill"
                        :style="{ width: item.correctRate + '%', backgroundColor: item.color }"
                      ></div>
                    </div>
                    <div class="difficulty-rate">{{ item.correctRate }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 排行榜 -->
          <el-tab-pane label="排行榜" name="ranking">
            <div class="ranking-content">
              <div class="ranking-header">
                <h3>成绩排行榜</h3>
                <div class="ranking-filters">
                  <el-select v-model="rankingFilter" @change="loadRanking">
                    <el-option label="全部" value="all" />
                    <el-option label="本周" value="week" />
                    <el-option label="本月" value="month" />
                  </el-select>
                </div>
              </div>
              
              <div class="ranking-list">
                <div
                  v-for="(item, index) in rankingList"
                  :key="item.id"
                  class="ranking-item"
                  :class="{ 'is-current-user': item.isCurrentUser }"
                >
                  <div class="rank-number">
                    <span
                      v-if="index < 3"
                      class="medal"
                      :class="`medal-${index + 1}`"
                    >
                      {{ index + 1 }}
                    </span>
                    <span v-else class="rank">{{ index + 1 }}</span>
                  </div>
                  
                  <div class="user-info">
                    <img
                      :src="item.user.avatar || defaultAvatar"
                      :alt="item.user.name"
                      class="user-avatar"
                    />
                    <div class="user-details">
                      <div class="user-name">{{ item.user.name }}</div>
                      <div class="user-title">{{ item.user.title || '学员' }}</div>
                    </div>
                  </div>
                  
                  <div class="score-info">
                    <div class="score">{{ item.score }}分</div>
                    <div class="completion-time">{{ formatDuration(item.completionTime) }}</div>
                  </div>
                </div>
              </div>
              
              <div v-if="hasMoreRanking" class="load-more">
                <el-button
                  type="primary"
                  plain
                  @click="loadMoreRanking"
                  :loading="loadingRanking"
                >
                  加载更多
                </el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Clock,
  Document,
  User,
  TrendCharts,
  InfoFilled,
  WarningFilled,
  Monitor,
  Connection,
  Setting
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getExamDetail, startExam, getExamRanking } from '@/api/exam'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const exam = ref({})
const activeTab = ref('instructions')
const rankingFilter = ref('all')
const rankingList = ref([])
const hasMoreRanking = ref(true)
const loadingRanking = ref(false)
const countdownTimer = ref(null)

// 默认头像
const defaultAvatar = ''

// 计算属性
const canStartExam = computed(() => {
  const now = new Date()
  const startTime = new Date(exam.value.startTime)
  return now >= startTime
})

const getExamButtonText = computed(() => {
  if (!canStartExam.value) {
    return '未到时间'
  }
  return '开始考试'
})

const scoreRanges = computed(() => {
  // 模拟成绩分布数据
  return [
    { label: '90-100分', count: 25, percentage: 20 },
    { label: '80-89分', count: 45, percentage: 36 },
    { label: '70-79分', count: 35, percentage: 28 },
    { label: '60-69分', count: 15, percentage: 12 },
    { label: '60分以下', count: 5, percentage: 4 }
  ]
})

const difficultyStats = computed(() => {
  // 模拟难度统计数据
  return [
    { label: '简单题目', correctRate: 85, color: '#67c23a' },
    { label: '中等题目', correctRate: 65, color: '#e6a23c' },
    { label: '困难题目', correctRate: 45, color: '#f56c6c' }
  ]
})

// 方法
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatCountdown = (seconds) => {
  const days = Math.floor(seconds / (24 * 3600))
  const hours = Math.floor((seconds % (24 * 3600)) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (days > 0) {
    return `${days}天${hours}小时${minutes}分钟`
  } else if (hours > 0) {
    return `${hours}小时${minutes}分钟${secs}秒`
  } else if (minutes > 0) {
    return `${minutes}分钟${secs}秒`
  } else {
    return `${secs}秒`
  }
}

const formatDuration = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`
  }
}

const getCategoryType = (category) => {
  const types = {
    course: 'primary',
    mock: 'success',
    certification: 'warning',
    competition: 'danger'
  }
  return types[category] || 'info'
}

const getCategoryText = (category) => {
  const texts = {
    course: '课程考试',
    mock: '模拟考试',
    certification: '认证考试',
    competition: '竞赛考试'
  }
  return texts[category] || '其他'
}

const getStatusType = (status) => {
  const types = {
    upcoming: 'info',
    ongoing: 'warning',
    finished: 'success'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    upcoming: '未开始',
    ongoing: '进行中',
    finished: '已结束'
  }
  return texts[status] || '未知'
}

const getDifficultyType = (difficulty) => {
  const types = {
    beginner: 'success',
    intermediate: 'warning',
    advanced: 'danger'
  }
  return types[difficulty] || 'info'
}

const getDifficultyText = (difficulty) => {
  const texts = {
    beginner: '入门',
    intermediate: '进阶',
    advanced: '高级'
  }
  return texts[difficulty] || '未知'
}

const getScoreClass = (score) => {
  if (score >= 90) return 'score-excellent'
  if (score >= 80) return 'score-good'
  if (score >= 60) return 'score-pass'
  return 'score-fail'
}

const getQuestionTypeText = (type) => {
  const texts = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return texts[type] || '其他'
}

// 事件处理
const handleStartExam = async () => {
  if (!canStartExam.value) {
    ElMessage.warning('考试尚未开始')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要开始考试「${exam.value.title}」吗？\n考试时长：${exam.value.duration}分钟\n题目数量：${exam.value.questionCount}题\n\n注意：考试开始后不可暂停，请确保有足够的时间完成考试。`,
      '开始考试',
      {
        confirmButtonText: '开始考试',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
    )
    
    // 调用开始考试API
    await startExam(exam.value.id)
    router.push(`/exam/${exam.value.id}/take`)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('开始考试失败，请重试')
    }
  }
}

const handleContinueExam = () => {
  router.push(`/exam/${exam.value.id}/take`)
}

const handleViewResult = () => {
  router.push(`/exam/${exam.value.id}/result`)
}

const handleRetakeExam = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重新考试吗？重新考试将覆盖之前的成绩。',
      '重新考试',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await startExam(exam.value.id)
    router.push(`/exam/${exam.value.id}/take`)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('重新考试失败，请重试')
    }
  }
}

// 数据加载
const loadExamDetail = async () => {
  try {
    loading.value = true
    const response = await getExamDetail(route.params.id)
    exam.value = response.data
    
    // 如果考试正在进行中，启动倒计时
    if (exam.value.status === 'ongoing' && exam.value.remainingTime) {
      startCountdown()
    }
  } catch (error) {
    ElMessage.error('加载考试详情失败')
    router.push('/exams')
  } finally {
    loading.value = false
  }
}

const loadRanking = async () => {
  try {
    loadingRanking.value = true
    const response = await getExamRanking(route.params.id, {
      filter: rankingFilter.value,
      page: 1,
      pageSize: 20
    })
    rankingList.value = response.data.list
    hasMoreRanking.value = response.data.hasMore
  } catch (error) {
    ElMessage.error('加载排行榜失败')
  } finally {
    loadingRanking.value = false
  }
}

const loadMoreRanking = async () => {
  try {
    loadingRanking.value = true
    const response = await getExamRanking(route.params.id, {
      filter: rankingFilter.value,
      page: Math.floor(rankingList.value.length / 20) + 1,
      pageSize: 20
    })
    rankingList.value.push(...response.data.list)
    hasMoreRanking.value = response.data.hasMore
  } catch (error) {
    ElMessage.error('加载更多排行榜失败')
  } finally {
    loadingRanking.value = false
  }
}

// 倒计时
const startCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
  
  countdownTimer.value = setInterval(() => {
    if (exam.value.remainingTime > 0) {
      exam.value.remainingTime--
    } else {
      clearInterval(countdownTimer.value)
      exam.value.status = 'finished'
    }
  }, 1000)
}

// 生命周期
onMounted(() => {
  loadExamDetail()
  loadRanking()
})

onUnmounted(() => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
})
</script>

<style lang="scss" scoped>
.exam-detail {
  min-height: 100vh;
  background: var(--bg-color);
}

.exam-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  color: white;
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.header-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--spacing-xl);
  align-items: start;
}

.breadcrumb {
  margin-bottom: var(--spacing-lg);
  
  :deep(.el-breadcrumb__inner) {
    color: rgba(255, 255, 255, 0.8);
    
    &.is-link {
      color: white;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  :deep(.el-breadcrumb__separator) {
    color: rgba(255, 255, 255, 0.6);
  }
}

.exam-basic {
  .exam-tags {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
  }
}

.exam-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md) 0;
}

.exam-description {
  font-size: var(--font-size-large);
  opacity: 0.9;
  line-height: 1.5;
  margin: 0 0 var(--spacing-lg) 0;
}

.exam-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  
  .el-icon {
    font-size: 16px;
  }
}

.exam-time {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.time-item {
  display: flex;
  font-size: var(--font-size-base);
  
  .time-label {
    min-width: 80px;
    opacity: 0.8;
  }
  
  .time-value {
    font-weight: 500;
  }
  
  &.countdown {
    .countdown-value {
      color: var(--warning-color);
      font-weight: 600;
      font-size: var(--font-size-medium);
    }
  }
}

.exam-actions {
  display: flex;
  justify-content: center;
}

.action-card {
  background: white;
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
}

.score-display {
  margin-bottom: var(--spacing-lg);
  
  .score-label {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-sm);
  }
  
  .score-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    
    &.score-excellent {
      color: var(--success-color);
    }
    
    &.score-good {
      color: var(--primary-color);
    }
    
    &.score-pass {
      color: var(--warning-color);
    }
    
    &.score-fail {
      color: var(--danger-color);
    }
  }
  
  .score-status {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-color-primary);
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  
  .action-btn {
    width: 100%;
    font-weight: 600;
    padding: var(--spacing-md) 0;
  }
}

.exam-content {
  padding: var(--spacing-xl) 0;
}

.exam-tabs {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
  
  :deep(.el-tabs__header) {
    margin: 0;
    background: var(--fill-color-extra-light);
    padding: 0 var(--spacing-lg);
  }
  
  :deep(.el-tabs__content) {
    padding: var(--spacing-xl);
  }
}

.instructions-content {
  .section {
    margin-bottom: var(--spacing-xl);
    
    h3 {
      font-size: var(--font-size-large);
      font-weight: 600;
      margin-bottom: var(--spacing-lg);
      color: var(--text-color-primary);
      border-bottom: 2px solid var(--primary-color);
      padding-bottom: var(--spacing-sm);
    }
  }
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.notice-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  border-left: 3px solid var(--primary-color);
  
  .notice-icon {
    color: var(--primary-color);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  
  span {
    line-height: 1.6;
    color: var(--text-color-regular);
  }
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.rule-item {
  h4 {
    font-size: var(--font-size-medium);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-color-primary);
  }
  
  p {
    line-height: 1.6;
    color: var(--text-color-regular);
    margin-bottom: var(--spacing-md);
  }
}

.score-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.score-item {
  background: var(--fill-color-extra-light);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-base);
  text-align: center;
  
  .question-type {
    display: block;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-xs);
  }
  
  .question-count,
  .question-score {
    display: block;
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.requirements {
  list-style: none;
  padding: 0;
  
  li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
    color: var(--text-color-regular);
    
    &::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--primary-color);
      font-weight: bold;
    }
  }
}

.tech-requirements {
  display: grid;
  gap: var(--spacing-lg);
}

.requirement-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  
  .req-icon {
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 4px;
  }
  
  .req-content {
    h4 {
      margin: 0 0 var(--spacing-xs) 0;
      font-size: var(--font-size-medium);
      font-weight: 600;
      color: var(--text-color-primary);
    }
    
    p {
      margin: 0;
      color: var(--text-color-regular);
      line-height: 1.5;
    }
  }
}

.statistics-content {
  .stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }
  
  .stat-card {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--fill-color-extra-light);
    border-radius: var(--border-radius-base);
    
    .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-color);
      line-height: 1;
      margin-bottom: var(--spacing-sm);
    }
    
    .stat-label {
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
  }
}

.score-distribution,
.difficulty-analysis {
  margin-bottom: var(--spacing-xl);
  
  h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-primary);
  }
}

.distribution-chart,
.difficulty-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.score-range,
.difficulty-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  
  .range-label,
  .difficulty-label {
    width: 100px;
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
  
  .range-bar,
  .difficulty-bar {
    flex: 1;
    height: 20px;
    background: var(--border-color-extra-light);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .range-fill,
  .difficulty-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
  }
  
  .range-count,
  .difficulty-rate {
    width: 60px;
    text-align: right;
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.ranking-content {
  .ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    
    h3 {
      margin: 0;
      font-size: var(--font-size-large);
      font-weight: 600;
    }
  }
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  transition: var(--transition-all);
  
  &.is-current-user {
    background: var(--primary-color-light-9);
    border: 1px solid var(--primary-color);
  }
  
  &:hover {
    background: var(--fill-color-light);
  }
}

.rank-number {
  width: 40px;
  text-align: center;
  
  .medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-small);
    
    &.medal-1 {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
    }
    
    &.medal-2 {
      background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    }
    
    &.medal-3 {
      background: linear-gradient(135deg, #cd7f32, #daa520);
    }
  }
  
  .rank {
    font-weight: 600;
    color: var(--text-color-secondary);
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  .user-name {
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-xs);
  }
  
  .user-title {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.score-info {
  text-align: right;
  
  .score {
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--font-size-medium);
    margin-bottom: var(--spacing-xs);
  }
  
  .completion-time {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.load-more {
  text-align: center;
  margin-top: var(--spacing-lg);
}

// 响应式设计
@include respond-below(lg) {
  .header-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .action-card {
    max-width: 400px;
    margin: 0 auto;
  }
}

@include respond-below(md) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .exam-title {
    font-size: 2rem;
  }
  
  .exam-meta {
    gap: var(--spacing-md);
  }
  
  .meta-item {
    font-size: var(--font-size-small);
  }
  
  .exam-tabs {
    :deep(.el-tabs__content) {
      padding: var(--spacing-md);
    }
  }
  
  .score-breakdown {
    grid-template-columns: 1fr;
  }
  
  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ranking-item {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

@include respond-below(sm) {
  .exam-tags {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .score-range,
  .difficulty-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    
    .range-label,
    .difficulty-label {
      width: auto;
    }
    
    .range-count,
    .difficulty-rate {
      width: auto;
      text-align: left;
    }
  }
}
</style>